{extend name="default/layout" /}

{block name="title"}{$title}{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 面包屑导航 -->
    <nav class="mb-6">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
            <li><a href="/" class="hover:text-blue-600">首页</a></li>
            <li><span class="mx-2">/</span></li>
            <li><a href="{$goods.url}" class="hover:text-blue-600">{$goods.name}</a></li>
            <li><span class="mx-2">/</span></li>
            <li class="text-gray-900">{$chapter.title}</li>
        </ol>
    </nav>

    <div class="mx-auto">
        <!-- 章节标题 -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-2">{$chapter.title}</h1>
            <div class="flex items-center space-x-4 text-sm text-gray-500">
                <span class="flex items-center space-x-1">
                    <i class="fas fa-file-alt text-green-500"></i>
                    <span>图文内容</span>
                </span>
                <span>所属商品：{$goods.name}</span>
            </div>
        </div>

        <!-- 章节内容 -->
        <div class="bg-white rounded-sm  border p-6">
            {if $has_auth}
                <div class="prose max-w-none">
                    {$chapter.content|raw}
                </div>
            {else}
                <div class="text-center py-12">
                    <div class="mb-4">
                        <i class="fas fa-lock text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">内容已锁定</h3>
                    <p class="text-gray-500 mb-6">购买商品后即可查看完整内容</p>
                    <a href="{$goods.url}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                        <i class="fas fa-shopping-cart mr-2"></i>
                        立即购买
                    </a>
                </div>
            {/if}
        </div>

        <!-- 返回商品详情 -->
        <div class="mt-6 text-center">
            <a href="{$goods.url}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                返回商品详情
            </a>
        </div>
    </div>
</div>
{/block}
